﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Questionary.aspx.cs" Inherits="Questionary.Views.Questionary" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/Style/questions.css" rel="stylesheet" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
</head>
<body>
        <div style="display:none" id="mask"></div>
        <div style="display:none" id="msgDiv">
        <div id="msgText"></div>
        <div class="okBtn" onclick="hideMsg()">知道了</div></div>

    <h1 style="text-align:center;margin-top:30px;">关于北片小学语文老师开展语文教学情况的调查问卷</h1><br /><br />
    <%--<h1 style="text-align:center;">题目</h1>--%>
    <div id="main">
    <form id="form1" runat="server">
        <div class="hInfo">
            学校： <select id="cbbSchool" name="cbbSchool">
                        <option>大石中心小学</option><option>大石小学</option><option>新联小学</option><option>富丽小学</option><option>礼村小学</option><option>河村小学</option>
                <option>上漖小学</option><option>沙溪小学</option><option>洛溪小学</option><option>洛溪新城小学</option><option>东乡小学</option><option>西一小学</option><option>西二小学</option>
                <option>丽江小学</option><option>番禺实验小学</option><option>时代南阳里小学</option><option>洛浦中心小学</option><option>珊瑚湾畔小学</option><option>番禺执信附小</option>
                <option>大山学校</option><option>会江实验学校</option><option>夏滘学校</option><option>名智小学</option><option>星执外国语小学</option></select>
            &nbsp;&nbsp;&nbsp;&nbsp;
            姓名： <asp:TextBox ID="txtName" runat="server" MaxLength="100" />
        </div>
        <br />
    <div>
        <%for (int i = 0; i < Questions.Count; i++){%>
        <div class="qArea">
        <div class="qTitle"><%=Questions[i].ID%>.&nbsp;<%=Questions[i].Description%></div>
        <!--文本-->
        <%if (Questions[i].QType == 2){ %>
        <textarea style="width:90%;height:60px;overflow-y:auto;" id="txt_<%=Questions[i].ID %>" name="txt_<%=Questions[i].ID %>" maxlength="300" ></textarea>
        <!--多选-->
        <%}else if (Questions[i].QType == 1){ %>
            <%for (int j = 0; j < Questions[i].Selections.Count; j++){%>
            <input class="qCheck" type="checkbox" id="cbb_<%=Questions[i].ID %>_<%=Questions[i].Selections[j].ID %>" name="cbb_<%=Questions[i].ID %>_<%=Questions[i].Selections[j].ID %>" /><label class="checkLabel" for="cbb_<%=Questions[i].ID %>_<%=Questions[i].Selections[j].ID %>"><%=Questions[i].Selections[j].Content %></label>
            <%} %>
        <%}else{ %>
                <%for (int j = 0; j < Questions[i].Selections.Count; j++){%>
        <input class="qRadio" name="rbG<%=Questions[i].ID %>" type="radio" id="rbb_<%=Questions[i].ID %>_<%=Questions[i].Selections[j].ID %>" value="<%=Questions[i].Selections[j].ID %>" /><label class="qRadioLabel" for="rbb_<%=Questions[i].ID %>_<%=Questions[i].Selections[j].ID %>"><%=Questions[i].Selections[j].Content %></label>
          <%} %>
        <%}%>

            </div>

            <%} %>
    </div>
        <div style="text-align:center;">
            <asp:Button CssClass="submitBtn" ID="btnSaveItem" runat="server" Text="提交" OnClientClick="return validate()" OnClick="btnSaveItem_Click" />
        </div>
    </form>
        

    </div>

    <script type="text/javascript">
        function _$(id) {
            return document.getElementById(id);
        }

        var questions =[<%=QuestionsData%>];

        function validate() {
            var errMsg = new Array();

            if (!_$("txtName").value) {
                errMsg.push("请输入姓名。");
            }

            var emptyIds = new Array();
            for (var i = 0; i < questions.length; i++) {
                var qItem = questions[i];
                //文本
                if (qItem[1] == 2) {
                    var elem = _$("txt_" + qItem[0]);
                    if (!elem.value) {
                        emptyIds.push(qItem[0]);
                    }
                    else if (elem.value.length > 600) {
                        errMsg.push("第" + qItem[0] + "题输入文字过长，请限制在300字以内。");
                    }
                }

                //复选
                if (qItem[1] == 1) {
                    var hasCheck = false;
                    for (var j = 0; j < qItem[2]; j++) {
                        var elem = _$("cbb_" + qItem[0] + "_" + j);
                        if (elem.checked) {
                            hasCheck = true;
                        }
                    }

                    if(!hasCheck)
                        emptyIds.push(qItem[0]);
                }

                //复选
                if (qItem[1] == 0) {
                    var hasCheck = false;
                    for (var j = 0; j < qItem[2]; j++) {
                        var elem = _$("rbb_" + qItem[0] + "_" + j);
                        if (elem.checked) {
                            hasCheck = true;
                        }
                    }

                    if (!hasCheck)
                        emptyIds.push(qItem[0]);
                }
            }

            if (emptyIds.length) {
                errMsg.push("还有题目("+emptyIds.join(",")+")还没填哦！");
            }

            if (errMsg.length == 0) return true;
            else {
                showMsg(errMsg.join("</br>"));
                return false;
            }
        }

        function showMsg(text) {
            _$('msgDiv').style.display = '';
            _$('mask').style.display = '';
            var viewHeight = document.body.scrollHeight;
            if (document.documentElement && document.documentElement.scrollHeight > viewHeight)
                viewHeight = document.documentElement.scrollHeight;

            _$('mask').style.height = viewHeight + "px";

            _$("msgText").innerHTML = text;
        }

        function hideMsg() {
            _$('msgDiv').style.display = 'none';
            _$('mask').style.display = 'none';
        }


    </script>

</body>
</html>
